<template>
  <div class="vm_info_index">
    <ga-collapse class="cus_collapse" :default-active-key="['1']">
      <ga-collapse-item header="基本信息" key="1">
        <ga-descriptions
          style="padding: 0 16px"
          :column="2"
          :align="{ label: 'right' }"
          :label-style="{ width: '100px' }"
          :value-style="{ minWidth: '180px' }"
        >
          <ga-descriptions-item label="别名">
            {{ info?.serialNumber || "-" }}
            <ga-link>修改</ga-link>
          </ga-descriptions-item>
          <ga-descriptions-item label="所属数据中心">
            {{ info?.brand || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="UUID">
            {{ info?.purchaser || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="所属可用区">
            {{ info?.maintenanceDate || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="IP地址">
            {{ info?.model || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="所属集群">
            {{ deviceInfo?.bios || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="统计架构系统">
            {{ info?.equipmentSupplier || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="所属主机"
            >{{ info?.operator || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="归属人">
            {{ info?.upDate || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="所属存储">
            {{ info?.upDate || "-" }}
          </ga-descriptions-item>
        </ga-descriptions>
        <ga-descriptions
          style="border-top: 16px solid #f4f7fb; padding: 16px"
          :column="2"
          :align="{ label: 'right' }"
          :label-style="{ width: '100px' }"
          :value-style="{ minWidth: '180px' }"
        >
          <ga-descriptions-item label="操作系统">
            {{ info?.serialNumber || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="内存">
            {{ info?.brand || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="CPU型号">
            {{ info?.purchaser || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="总容量">
            {{ info?.maintenanceDate || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="CPU架构">
            {{ info?.model || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="置放群组">
            {{ deviceInfo?.bios || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="vCPU">
            {{ info?.equipmentSupplier || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="运行时间"
            >{{ info?.operator || "-" }}
          </ga-descriptions-item>
        </ga-descriptions>
      </ga-collapse-item>
    </ga-collapse>
    <ga-collapse
      style="margin-top: 16px"
      class="cus_collapse"
      :default-active-key="['2']"
    >
      <ga-collapse-item header="网卡信息" key="2">
        <div
          v-for="(item, idx) in 3"
          :key="item"
          :style="{ 'border-top': idx !== 0 ? '16px solid #f4f7fb' : 'none' }"
        >
          <div class="flex_between_aligncenter collapse_tlt">
            <div class="tlt_l">网卡01</div>
            <div class="tlt_r">
              <icon-down-circle
                size="20"
                style="color: #0f5ef7; cursor: pointer"
                v-if="curIdx?.includes(idx)"
                @click="openCard(idx)"
              />
              <icon-up-circle
                size="20"
                style="color: #0f5ef7; cursor: pointer"
                v-else
                @click="openCard(idx)"
              />
            </div>
          </div>
          <ga-descriptions
            v-if="curIdx?.includes(idx)"
            style="padding: 0 16px"
            :column="2"
            :align="{ label: 'right' }"
            :label-style="{ width: '100px' }"
            :value-style="{ minWidth: '180px' }"
          >
            <ga-descriptions-item label="所属网络">
              {{ info?.brand || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="IP">
              {{ info?.serialNumber || "-" }}
              <ga-link>修改</ga-link>
            </ga-descriptions-item>
            <ga-descriptions-item label="所属子网">
              {{ info?.purchaser || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="MAC">
              {{ info?.maintenanceDate || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="网关">
              {{ info?.model || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="状态">
              {{ deviceInfo?.bios || "-" }}
            </ga-descriptions-item>
          </ga-descriptions>
        </div>
      </ga-collapse-item>
    </ga-collapse>
    <ga-collapse
      style="margin-top: 16px"
      class="cus_collapse"
      :default-active-key="['3']"
    >
      <ga-collapse-item header="磁盘信息" key="31">
        <div
          v-for="(item, idx) in 3"
          :key="item"
          :style="{ 'border-top': idx !== 0 ? '16px solid #f4f7fb' : 'none' }"
        >
          <div class="flex_between_aligncenter collapse_tlt">
            <div class="tlt_l">磁盘01</div>
            <div class="tlt_r">
              <icon-down-circle
                size="20"
                style="color: #0f5ef7; cursor: pointer"
                v-if="curIdx?.includes(idx)"
                @click="openCard(idx)"
              />
              <icon-up-circle
                size="20"
                style="color: #0f5ef7; cursor: pointer"
                v-else
                @click="openCard(idx)"
              />
            </div>
          </div>
          <ga-descriptions
            v-if="curIdx?.includes(idx)"
            style="padding: 0 16px"
            :column="2"
            :align="{ label: 'right' }"
            :label-style="{ width: '100px' }"
            :value-style="{ minWidth: '180px' }"
          >
            <ga-descriptions-item label="容量">
              {{ info?.serialNumber || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="存储">
              {{ info?.brand || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="类型">
              {{ info?.purchaser || "-" }}
            </ga-descriptions-item>
          </ga-descriptions>
        </div>
      </ga-collapse-item>
    </ga-collapse>
  </div>
</template>

<script setup>
import { ref } from "vue";
const curIdx = ref([]);
// 处理方法
const openCard = (index) => {
  if (!curIdx.value.includes(index)) {
    curIdx.value.push(index);
  } else {
    curIdx.value = curIdx.value.filter((item) => item !== index);
  }
};
// const props = defineProps({
//   // 标题
//   title: {
//     type: String,
//     default: "温馨提示",
//   },
// });
// const emits = defineEmits(["handleSubmit"]);
// defineExpose({});
// const handleTabChange = (tab) => {
//   emits('handleTabChange', tab)
// }
</script>

<style lang="scss" scoped>
.vm_info_index {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  .collapse_tlt {
    font-size: 15px;
    padding: 0 24px;
    line-height: 40px;
  }
}
</style>
